<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue/vue.js"></script>
</head>
<body>

<!-- 页面模板 -->
<div id="app">
    <ul>
       <li v-for="e in emps" @click="clickMeVue(e)">
           {{e.id}}-{{e.name}}-{{e.sex | sexFormat}}-{{e.age}}
       </li>
   </ul>

</div>
<script>
    // 全局的
    Vue.filter('sexFormat',function (value) {
        if(value == 0){
            return "女";
        }else if(value == 1){
            return "男";
        }else {
            return "保密";
        }
    });

    var app = new Vue({
        el:'#app', //获取页面模板 通过上面的id指定
        data:{ //vue 渲染模板的时候需要的数据
            emps:[
               /* {id:1,name:"chen",sex:1,age:12},
                {id:2,name:"ji",sex:0,age:13},
                {id:3,name:"wei",sex:-1,age:14}*/
            ]
        },
        methods:{ //vue实例方法
            clickMeVue:function (e,emp) {
                console.log(e);//事件对象
                console.log(e.currentTarget);//事件源
                console.log(emp.id,emp.name);//参数
            }
        },
        filters:{
            //性别格式化 局部的
            sexFormat:function (value) {
                if(value == 0){
                    return "女";
                }else if(value == 1){
                    return "男";
                }else {
                    return "保密";
                }
            }
        },
        mounted:function () {

            var es = [
                {id:1,name:"chen",sex:1,age:12},
                {id:2,name:"ji",sex:0,age:13},
                {id:3,name:"wei",sex:-1,age:14}
            ]


            this.emps = es;
            //vue.emps = es; 还没被定义出来,所以不能直接这样使用
            console.log("-----------------------")
        }
    });
</script>
</body>
</html>